<template>
    <view class="step12-box step-box">
        <UNavbar title="施工后安全提醒"> </UNavbar>
        <view class="tips">
            <view>1、确认施工现场工机具、材料无遗留</view>
            <view>2、确认人员撤离、设备状态、防护撤除</view>
        </view>
        <TabStep @leftClick="onLeftClick" @rightClick="onRightClick"></TabStep>
    </view>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
import { onLoad, onShow, onHide, onUnload } from '@dcloudio/uni-app'; // Uniapp 页面生命周期
import TabStep from './TabStep.vue';
import UNavbar from '@/components/YNavbar/index.vue';
const data = reactive({
    status: '施工后安全提醒',
});

let audio = ref(null);
onMounted(() => {
    initAudio();
});

// 页面隐藏时停止播放
onHide(() => {
    destroyAudio();
});

const initAudio = () => {
    audio.value = uni.createInnerAudioContext();
    audio.value.src = '/static/t13.mp3'; // 替换为实际音频URL
    try {
        audio.value.play();
        console.log('正在播放...');
        data.status =
            '作业完毕，施工负责人需组织召开总结会并进行第三次清点，清点过程要全程录像，填写《三清点、一确认清单检查表》。作业负责人带队，按照走行路径，带领全体作业人员撤离作业地点，撤离完毕后，通知驻站联络员现场已安全撤离，可以销记，并电话向段调度指挥中心报备作业结束。';
    } catch (error) {
        console.error('播放失败:', error);
        uni.showToast({
            title: '自动播放失败',
            icon: 'error',
        });
    }
};
const destroyAudio = () => {
    audio.value.destroy();
};

const onLeftClick = () => {
    uni.navigateTo({
        url: '/pages/home/forms/step12',
    });
};
const onRightClick = () => {
    uni.navigateTo({
        url: '/pages/home/forms/step14',
    });
};
</script>

<style lang="scss">
.step12-box {
    .u-td {
        height: auto;
    }
    .u-button {
        width: auto;
    }
}
</style>
